<template>
	<view class="page">
		<view :style="'height:'+statusBarHeight+'px'"></view>
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation class="scroll-row">
			<view v-for="(item, index) in tabBars" :key="index"
			  class="scroll-row-item" :id="'tab_'+index"
			  @click="changeTab(index)">
				<view class="ml-3 flex align-center justify-center" style="width: 120rpx;height: 80rpx;">
					<view class="px-3 py-2" :class="{'bg-danger': tabIndex === index}">
						<text class="text-drak font" :class="{'text-white': tabIndex === index}">
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- end 顶部选项卡 -->
		
		<swiper class="bg-white" :duration="150" :current="tabIndex" @change="onChangeTab" :style="{'height': scrollH+'px'}">
			<swiper-item>
				<scroll-view scroll-y :style="{'height': scrollH+'px'}">
					<wy-d-list ref="gear_0" :gear="0"></wy-d-list>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<wy-d-list ref="gear_1" :gear="1"></wy-d-list>
			</swiper-item>
			<swiper-item>
				<wy-d-list ref="gear_2" :gear="2"></wy-d-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				statusBarHeight: 0,
				scrollH: 600,
				tabIndex: 0,
				scrollInto: "",
				tabBars: [
					{ id: '1', text: '全部' },
					{ id: '2', text: '在线' },
					{ id: '3', text: '离线' },
				],
			}
		},
		methods: {
			// 切换选项
			changeTab(index){ 
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab_' + index
				
				this.$refs.gear_0.query.pageNum = 1;
				this.$refs.gear_0.query.pageSize = 20;
				if (this.tabIndex === 0) {
					this.$refs.gear_0.query.isOnline = ''
					this.$refs.gear_0.getList();
				} else if (this.tabIndex === 1) {
					this.$refs.gear_1.query.isOnline = '1'
					this.$refs.gear_1.getList();
				} else if (this.tabIndex === 2) {
					this.$refs.gear_2.query.isOnline = '0'
					this.$refs.gear_2.getList();
				}
				
			},
			// 监听滑动
			onChangeTab(e){ 
				this.changeTab(e.detail.current)
			},
		}, // end methods
		onReady() {
			// 获取屏幕高度
			let res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
			this.windowHeight = res.windowHeight
			this.scrollH = this.windowHeight - uni.upx2px(80) - res.statusBarHeight
		}
	}
</script>

<style>
	
</style>
